<template>
  <view class="choose-pay">
    <cell v-for="(item, i) in payWays" :key="item.type" @click="choosePay(item, i)" :border="i < payWays.length - 1">
      <template #label>
        <view class="flexbox">
          <image class="pay-img" :src="$getImg(`iassCashier/${item.icon}`)" mode="widthFix" />
          <view class="pay-text">{{item.name}}</view>
        </view>
      </template>
      <view class="flexbox">
        <view class="pay-text pay-text-desc">{{item.desc}}</view>
        <image class="pay-img2" :src="$getImg(`iassCashier/${item.type === payWay ? 'checked' : 'check'}.png`)"
          mode="aspectFill" />
      </view>
    </cell>
  </view>
</template>
<script>
  let payWay = '';
  // #ifdef MP-WEIXIN
  payWay = '1'; //微信支付方式
  // #endif
  // #ifdef MP-ALIPAY
  payWay = '2'; //支付宝方式
  // #endif
  import Cell from './Cell.vue';
  export default {
    components: {
      Cell
    },
    data() {
      return {
        payWay,
        ningLaiHua: {
          icon: 'bank.jpg',
          name: '宁来花支付',
          type: '13',
          desc: '0手续费'
        },
        bankAppPay: {
          icon: 'bank.jpg',
          name: '宁波银行支付',
          type: '8',
          desc: '可使用波豆抵扣'
        },
      };
    },
    props: {
      ningLaiHuaFlag: {
        type: String,
        default: '1' // 0 支持，1或其他不支持
      },
      bankAppPayFlag: {
        type: String,
        default: '1' // 0 支持，1或其他不支持
      },
      paymentPrompt: {
        type: String,
        default: '' // 0 支持，1或其他不支持
      }
    },
    computed: {
      payWays() {
        let res = [{
          icon: payWay == '1' ? 'wx.png' : 'alipay.png',
          name: payWay == '1' ? '微信支付' : '支付宝支付',
          type: payWay,
          desc: ''
        }]
        if (this.ningLaiHuaFlag == '0') {
          this.ningLaiHua.desc = this.paymentPrompt || '';
          res.push(this.ningLaiHua)
        }
        if (this.bankAppPayFlag == '0') {
          res.push(this.bankAppPay)
        }
        return res
      }
    },
    methods: {
      choosePay(item) {
        if (this.payWay != item.type) {
          this.payWay = item.type
          this.$emit('change', item)
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .choose-pay {
    .flexbox {
      display: flex;
      align-items: center;
    }

    .pay-text {
      color: #333;
      font-size: 15px;
      line-height: 24px;
      padding: 0 12px;
      word-break: break-all;
    }

    .pay-text-desc {
      color: #ee0a24;
      flex: 1;
      text-align: right;
    }

    .pay-img {
      display: block;
      width: 25px;
      height: auto;
    }

    .pay-img2 {
      display: block;
      width: 20px;
      height: 20px;
    }
  }
</style>